<template>
  <div class="navbar-container">
    <el-affix target=".container-main" :offset="0">
      <el-menu class="el-menu-demo" mode="horizontal" @select="select">
        <el-menu-item index="1">
          <router-link to="/Home" class="link">主页</router-link>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <router-link to="/Kind" class="link">分类</router-link>
          </template>
          <el-menu-item index="2-1">item one</el-menu-item>
          <el-menu-item index="2-2">item two</el-menu-item>
          <el-menu-item index="2-3">item three</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="3">
          <router-link to="/Message" class="link">信息</router-link>
        </el-menu-item>
        <el-menu-item index="4">
          <router-link to="/About" class="link">关于</router-link>
        </el-menu-item>
        <el-menu-item index="4">
          <router-link to="/Manager" class="link">控制台</router-link>
        </el-menu-item>
      </el-menu>
    </el-affix>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      menus: ["首页", "分类", "关于"],
    };
  },
  methods: {
    select(arr) {
      console.log(arr);
    },
  },
};
</script>

<style scoped>
.navbar-icon img {
  width: 10%;
}
.el-menu-item {
  padding: 0px;
}
.link {
  padding: 0px 20px;
  text-decoration: none;
}
</style>
